<!DOCTYPE html>
<html>
<head>
    <title>仪表盘API测试</title>
    <meta charset="UTF-8">
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .error { color: red; }
        .success { color: green; }
        .data { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 3px; }
        pre { white-space: pre-wrap; word-wrap: break-word; }
        button { padding: 10px 15px; margin: 5px; cursor: pointer; }
        input { padding: 8px; margin: 5px; width: 300px; }
    </style>
</head>
<body>
    <h1>仪表盘API集成测试</h1>
    
    <div class="section">
        <h3>1. 登录获取Token</h3>
        <input type="text" id="username" placeholder="用户名" value="sbxnh">
        <input type="password" id="password" placeholder="密码" value="123456">
        <button onclick="login()">登录</button>
        <div id="loginResult"></div>
    </div>
    
    <div class="section">
        <h3>2. 测试仪表盘API</h3>
        <button onclick="testDashboardData()">获取完整仪表盘数据</button>
        <button onclick="testUserSummary()">获取用户摘要</button>
        <button onclick="testProjectStats()">获取项目统计</button>
        <button onclick="testTaskStats()">获取任务统计</button>
        <div id="apiResult"></div>
    </div>
    
    <div class="section">
        <h3>3. 数据展示</h3>
        <div id="dataDisplay"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080';
        let token = '';

        function log(message, type = 'info') {
            console.log(message);
            const resultDiv = document.getElementById('apiResult');
            const className = type === 'error' ? 'error' : (type === 'success' ? 'success' : '');
            resultDiv.innerHTML += `<div class="${className}">[${new Date().toLocaleTimeString()}] ${message}</div>`;
        }

        async function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            try {
                const response = await fetch(`${API_BASE}/auth/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    token = data.token;
                    document.getElementById('loginResult').innerHTML = 
                        `<div class="success">登录成功！Token: ${token.substring(0, 50)}...</div>`;
                    log('登录成功，获取到token', 'success');
                } else {
                    const errorText = await response.text();
                    document.getElementById('loginResult').innerHTML = 
                        `<div class="error">登录失败: ${response.status} - ${errorText}</div>`;
                    log(`登录失败: ${response.status}`, 'error');
                }
            } catch (error) {
                document.getElementById('loginResult').innerHTML = 
                    `<div class="error">登录错误: ${error.message}</div>`;
                log(`登录错误: ${error.message}`, 'error');
            }
        }

        async function testDashboardData() {
            if (!token) {
                log('请先登录获取token', 'error');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/dashboard/data`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    log('获取仪表盘数据成功', 'success');
                    displayDashboardData(data);
                } else {
                    const errorText = await response.text();
                    log(`获取仪表盘数据失败: ${response.status} - ${errorText}`, 'error');
                }
            } catch (error) {
                log(`获取仪表盘数据错误: ${error.message}`, 'error');
            }
        }

        async function testUserSummary() {
            if (!token) {
                log('请先登录获取token', 'error');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/dashboard/summary`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    log('获取用户摘要成功', 'success');
                    document.getElementById('dataDisplay').innerHTML = 
                        `<div class="data"><h4>用户摘要数据:</h4><pre>${JSON.stringify(data, null, 2)}</pre></div>`;
                } else {
                    const errorText = await response.text();
                    log(`获取用户摘要失败: ${response.status} - ${errorText}`, 'error');
                }
            } catch (error) {
                log(`获取用户摘要错误: ${error.message}`, 'error');
            }
        }

        async function testProjectStats() {
            if (!token) {
                log('请先登录获取token', 'error');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/dashboard/projects`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    log('获取项目统计成功', 'success');
                    document.getElementById('dataDisplay').innerHTML = 
                        `<div class="data"><h4>项目统计数据:</h4><pre>${JSON.stringify(data, null, 2)}</pre></div>`;
                } else {
                    const errorText = await response.text();
                    log(`获取项目统计失败: ${response.status} - ${errorText}`, 'error');
                }
            } catch (error) {
                log(`获取项目统计错误: ${error.message}`, 'error');
            }
        }

        async function testTaskStats() {
            if (!token) {
                log('请先登录获取token', 'error');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/dashboard/tasks`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    log('获取任务统计成功', 'success');
                    document.getElementById('dataDisplay').innerHTML = 
                        `<div class="data"><h4>任务统计数据:</h4><pre>${JSON.stringify(data, null, 2)}</pre></div>`;
                } else {
                    const errorText = await response.text();
                    log(`获取任务统计失败: ${response.status} - ${errorText}`, 'error');
                }
            } catch (error) {
                log(`获取任务统计错误: ${error.message}`, 'error');
            }
        }

        function displayDashboardData(data) {
            const display = document.getElementById('dataDisplay');
            
            let html = '<h4>完整仪表盘数据:</h4>';
            
            if (data.userSummary) {
                html += `
                    <div class="data">
                        <h5>用户摘要:</h5>
                        <p>姓名: ${data.userSummary.fullName || '未设置'}</p>
                        <p>部门: ${data.userSummary.department || '未设置'}</p>
                        <p>角色: ${data.userSummary.role || '未设置'}</p>
                        <p>状态: ${data.userSummary.status || '未设置'}</p>
                        <p>项目数: ${data.userSummary.totalProjects || 0}</p>
                        <p>任务数: ${data.userSummary.totalTasks || 0}</p>
                        <p>论文数: ${data.userSummary.totalPublications || 0}</p>
                    </div>
                `;
            }
            
            if (data.projectStatistics) {
                html += `
                    <div class="data">
                        <h5>项目统计:</h5>
                        <p>总项目数: ${data.projectStatistics.totalProjects || 0}</p>
                        <p>进行中: ${data.projectStatistics.activeProjects || 0}</p>
                        <p>已完成: ${data.projectStatistics.completedProjects || 0}</p>
                        <p>待审批: ${data.projectStatistics.pendingProjects || 0}</p>
                        <p>总预算: ${data.projectStatistics.totalBudget || 0}</p>
                    </div>
                `;
            }
            
            if (data.taskStatistics) {
                html += `
                    <div class="data">
                        <h5>任务统计:</h5>
                        <p>总任务数: ${data.taskStatistics.totalTasks || 0}</p>
                        <p>待办: ${data.taskStatistics.todoTasks || 0}</p>
                        <p>进行中: ${data.taskStatistics.inProgressTasks || 0}</p>
                        <p>已完成: ${data.taskStatistics.completedTasks || 0}</p>
                        <p>逾期: ${data.taskStatistics.overdueTasks || 0}</p>
                        <p>紧急: ${data.taskStatistics.urgentTasks || 0}</p>
                    </div>
                `;
            }
            
            html += `<div class="data"><h5>完整JSON数据:</h5><pre>${JSON.stringify(data, null, 2)}</pre></div>`;
            
            display.innerHTML = html;
        }

        // 页面加载时的提示
        window.onload = function() {
            log('页面加载完成，请先登录然后测试API');
        };
    </script>
</body>
</html>
